VTable 1.11.1
Tutorials
Options
API
FAQ
Changelogs
VChart Story Teller

Not only an out-of-the-box multi-terminal chart library, but also a vivid and flexible data storyteller.

VTable Checkered Artist

Not only a high-performance multi-dimensional data analysis form, but also a grid artist created between rows and columns.

VGrammar Data Magician

It is not only a visual grammar that generates thousands of charts, but also a data magician who turns boring into magic.

VRender Visual Rendering

Not only a visual rendering engine with rich functions, but also a handy pen.

VMind Smart Visualization Suit

Not just automatic, but also fantastic.

VStory Relationship Explorer plus

It is not only a fully functional graph visualization library, but also an explorer of data relationships.

!!!###!!!title=52. Usage issues of the editing cell ability of the VTable component: How to configure the editor and whether it can be reused?——VisActor/VTable FAQ documents!!!###!!!!!!###!!!description=---title: 30. Usage issues of the editing cell ability of the VTable component: How to configure the editor and whether it can be reused?</br>key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM--- !!!###!!!

Question Title

Usage issues of the editing cell ability of the VTable component: How to configure the editor and whether it can be reused?

Problem Description

In business scenarios, there are many columns in the table. If each column needs to be configured with an editor, it will be more cumbersome. Is there a simple way to define it?

Solution

You can decide which way to configure the editor according to the specific degree of business reuse:

  • Only configure a global editor and use it for all cells:
import { DateInputEditor, InputEditor, ListEditor, TextAreaEditor } from '@visactor/vtable-editors';
const option={
  editor: new InputEditor()
}</br>

After configuration, you can click on any cell to edit it.

  • If a few columns can share the same editor, you can declare the same editor name in the columns column configuration for reuse.
import { DateInputEditor, InputEditor, ListEditor, TextAreaEditor } from '@visactor/vtable-editors';
const input_editor = new InputEditor();
VTable.register.editor('input-editor', input_editor);

const option={
  columns:[
      {field:'id',title: 'ID'},
      {field:'name',title: 'NAME',editor:'input-editor'},
      {field:'address',title: 'ADDRESS',editor:'input-editor'},
  ]
}</br>

After configuration, you will find that the cells in this column can all be edited.

You can modify and debug the demo on the official website in the above two ways to verify. demo URL:https://visactor.io/vtable/demo/edit/edit-cell